<template>
  <div class="customconfig-container">
    <div class="adminContent">
      <div class="butList">
        <div>自定义配置</div>
        <div class="add" @click="addHander('add')"><span>+</span> 添加配置 </div>
      </div>
      <div class="cont">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="name"
            label="名称"
          />
          <el-table-column
            prop="fieldKey"
            label="变量名(key)"
          />
          <el-table-column
            prop="description"
            label="说明"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click.native.prevent="editRow(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                type="text"
                size="small"
                @click.native.prevent="deleteRow(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table></div>
    </div>
    <Addconfig ref="Addconfig" @updataList="updataList" />
  </div>
</template>

<script>
import Addconfig from './components/addconfig'
import { mapGetters } from 'vuex'
import { getCusromConfigList } from '@/api/approval'

export default {
  name: 'Customconfig',
  components: {
    Addconfig
  },
  data() {
    return {
      tableData: [],
      row: {},
      pageCont: {
        size: 1000,
        current: 1
      }
    }
  },
  computed: {
    ...mapGetters([
      'flowId'
    ])
  },

  created() {
    this.init()
  },

  methods: {
    updataList() {
      this.init()
    },
    async init() {
      const res = await getCusromConfigList(this.pageCont)
      this.tableData = res.records
    },
    deleteRow(_row) {
      this.$refs.Addconfig.delHander(_row)
    },
    editRow(_row) {
      this.$refs.Addconfig.editerHander(_row)
    },
    addHander() {
      this.$refs.Addconfig.addHander()
    }
  }
}
</script>
<style lang="scss" scoped>
  .customconfig {
    &-container {
      .adminContent {
        .title {
          text-align: center;
          padding: 0 15px;
          line-height: 40px;
          background: #eceffc;
        }
        .butList{
          padding: 0 20px;
          display: flex;
          justify-content: space-between;
          cursor: pointer;
          /*color: #3345ff;*/
          font-size: 16px;
          line-height: 50px;
          span{
            display: inline-block;
            position: relative;
            top:-1px;
            text-align: center;
            font-weight: bold;
            margin-right: 2px;
            color:#fff;
            background: #3345ff;
            line-height: 12px;
            height: 14px;
            width: 14px;
            border-radius: 100%;
          }
          .add{
            color: #3345ff;
          }
        }
        .cont {
          padding:0 20px;

        }
      }
    }
  }
</style>
